<template>
  <div class="home-content">
    <h1>欢迎来到优购二手商城</h1>
    <el-carousel 
      height="500px" 
      indicator-position="outside" 
      autoplay 
      interval="2000" 
      :arrow="hoverArrow ? 'hover' : 'always'"
    >
      <el-carousel-item v-for="item in carouselImages" :key="item.id">
        <img :src="item.url" :alt="item.alt" class="carousel-img" />
      </el-carousel-item>
    </el-carousel>
  </div>
  <!-- 欢迎信息 -->
    <div class="welcome-section">
      <h2>发现更好的二手商品，省钱又环保</h2>
      <p>
        欢迎来到优购二手商城，我们为您提供丰富的商品选择，帮助您以更低的价格购买到高质量的二手商品。
        不仅如此，您的每一次购物都在为环保贡献力量，快来加入我们吧！
      </p>
    </div>
</template>

<script>
export default {
  name: "HomeContent",
  data() {
    return {
      carouselImages: [
        { id: 1, url: "https://img2.baidu.com/it/u=1940313921,2921187748&fm=253&fmt=auto&app=138&f=JPEG?w=460&h=440", alt: "轮播图1" },
        { id: 2, url: "https://img1.baidu.com/it/u=3395338183,1561402822&fm=253&fmt=auto&app=138&f=JPEG?w=320&h=320", alt: "轮播图2" },
        { id: 3, url: "https://img0.baidu.com/it/u=3255881089,3855353539&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500", alt: "轮播图3" },
      ],
      hoverArrow: true,
    };
  },
};
</script>

<style scoped>
.home-content {
  text-align: center;
  padding: 20px;
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 使图片自适应容器，保持比例，避免裁剪 */
}

h1 {
  font-size: 28px;
  color: #333;
  margin-bottom: 20px;
}
</style>
